// 照片画廊系统
document.addEventListener('DOMContentLoaded', function() {
    // 照片数据 - 实际项目中可以从服务器获取
    const galleryData = {
        'first-meet': [
            { url: 'img/R-C.gif', caption: '我们的第一次相遇' },
            { url: 'img/yinghua.gif', caption: '美好的回忆' },
            { url: 'img/zhiwo.gif', caption: '难忘的瞬间' }
        ],
        'first-date': [
            { url: 'img/R-C.gif', caption: '第一次约会' },
            { url: 'img/yinghua.gif', caption: '愉快的交谈' },
            { url: 'img/zhiwo.gif', caption: '甜蜜的时光' }
        ],
        'valentine': [
            { url: 'img/R-C.gif', caption: '第一个情人节' },
            { url: 'img/yinghua.gif', caption: '特别的礼物' },
            { url: 'img/zhiwo.gif', caption: '浪漫的晚餐' }
        ]
    };

    // 初始化画廊
    initGallery();

    function initGallery() {
        // 绑定相册缩略图点击事件
        const albumThumbs = document.querySelectorAll('.album-thumb');
        albumThumbs.forEach(thumb => {
            thumb.addEventListener('click', function() {
                const albumId = this.getAttribute('data-album');
                switchAlbum(albumId);
            });
        });

        // 绑定缩略图点击事件
        const thumbnailContainers = document.querySelectorAll('.timeline-photos');
        thumbnailContainers.forEach(container => {
            const galleryId = container.getAttribute('data-gallery');
            const thumbnails = container.querySelectorAll('img');
            
            thumbnails.forEach((thumbnail, index) => {
                thumbnail.addEventListener('click', () => {
                    openGalleryModal(galleryId, index);
                });
            });
        });

        // 绑定模态框关闭按钮
        const closeModalBtn = document.querySelector('.close-modal');
        if (closeModalBtn) {
            closeModalBtn.addEventListener('click', closeGalleryModal);
        }

        // 绑定导航箭头
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        if (prevBtn && nextBtn) {
            prevBtn.addEventListener('click', showPrevSlide);
            nextBtn.addEventListener('click', showNextSlide);
        }

        // 点击模态框背景关闭
        const modal = document.getElementById('galleryModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeGalleryModal();
                }
            });
        }
    }

    // 当前画廊状态
    let currentGallery = {
        id: null,
        photos: [],
        currentIndex: 0
    };

    // 打开画廊模态框
    function openGalleryModal(galleryId, startIndex = 0) {
        currentGallery.id = galleryId;
        currentGallery.photos = galleryData[galleryId] || [];
        currentGallery.currentIndex = startIndex;

        const modal = document.getElementById('galleryModal');
        const slidesContainer = document.querySelector('.gallery-slides');
        const albumTitle = document.createElement('h3');
        albumTitle.className = 'album-title';
        albumTitle.textContent = getAlbumName(galleryId);

        if (modal && slidesContainer) {
            // 清空现有幻灯片
            slidesContainer.innerHTML = '';
            slidesContainer.appendChild(albumTitle);

            // 创建幻灯片
            currentGallery.photos.forEach((photo, index) => {
                const slide = document.createElement('div');
                slide.className = 'slide';
                if (index === startIndex) {
                    slide.classList.add('active');
                }

                const img = document.createElement('img');
                img.src = photo.url;
                img.alt = photo.caption;
                img.onerror = function() {
                    this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23f5f5f5"/><text x="200" y="150" font-family="Arial" font-size="16" text-anchor="middle" fill="%23999999">图片加载失败</text></svg>';
                    const caption = this.parentNode.querySelector('.caption');
                    if (caption) {
                        caption.textContent = `[图片加载失败] ${photo.caption}`;
                        caption.style.color = '#ff6b6b';
                    }
                };

                const caption = document.createElement('p');
                caption.className = 'caption';
                caption.textContent = photo.caption;

                slide.appendChild(img);
                slide.appendChild(caption);
                slidesContainer.appendChild(slide);
            });

            // 显示模态框
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';

            // 更新幻灯片位置
            updateSlidePosition();
        }
    }

    // 切换相册
    function switchAlbum(albumId) {
        // 更新活动相册指示器
        const albumThumbs = document.querySelectorAll('.album-thumb');
        albumThumbs.forEach(thumb => {
            thumb.classList.remove('active');
            if (thumb.getAttribute('data-album') === albumId) {
                thumb.classList.add('active');
            }
        });

        // 打开新相册的第一张照片
        openGalleryModal(albumId, 0);
    }

    // 关闭画廊模态框
    function closeGalleryModal() {
        const modal = document.getElementById('galleryModal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    }

    // 显示上一张幻灯片
    function showPrevSlide() {
        if (currentGallery.photos.length === 0) return;

        currentGallery.currentIndex--;
        if (currentGallery.currentIndex < 0) {
            currentGallery.currentIndex = currentGallery.photos.length - 1;
        }

        updateSlidePosition();
    }

    // 显示下一张幻灯片
    function showNextSlide() {
        if (currentGallery.photos.length === 0) return;

        currentGallery.currentIndex++;
        if (currentGallery.currentIndex >= currentGallery.photos.length) {
            currentGallery.currentIndex = 0;
        }

        updateSlidePosition();
    }

    // 更新幻灯片位置
    function updateSlidePosition() {
        const slidesContainer = document.querySelector('.gallery-slides');
        if (!slidesContainer) return;

        const slides = slidesContainer.querySelectorAll('.slide');
        const slideWidth = slidesContainer.clientWidth;

        slides.forEach((slide, index) => {
            slide.classList.remove('active', 'prev', 'next');
            
            if (index === currentGallery.currentIndex) {
                slide.classList.add('active');
            } else if (index === (currentGallery.currentIndex - 1 + slides.length) % slides.length) {
                slide.classList.add('prev');
            } else if (index === (currentGallery.currentIndex + 1) % slides.length) {
                slide.classList.add('next');
            }

            slide.style.transform = `translateX(${(index - currentGallery.currentIndex) * slideWidth}px)`;
        });
    }

    // 获取相册名称
    function getAlbumName(albumId) {
        const albumNames = {
            'first-meet': '第一次相遇',
            'first-date': '第一次约会', 
            'valentine': '情人节'
        };
        return albumNames[albumId] || '相册';
    }

    // 添加键盘导航
    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('galleryModal');
        if (modal && modal.style.display === 'block') {
            if (e.key === 'Escape') {
                closeGalleryModal();
            } else if (e.key === 'ArrowLeft') {
                showPrevSlide();
            } else if (e.key === 'ArrowRight') {
                showNextSlide();
            }
        }
    });

    // 添加画廊样式
    const galleryStyle = document.createElement('style');
    galleryStyle.textContent = `
        #galleryModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(46, 241, 169, 0.9);
            z-index: 1000;
            overflow: hidden;
        }
        
        .modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            height: 80vh;
            margin: 5vh auto;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 25px;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1001;
        }
        
        .gallery-slides {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease-in-out;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .slide img {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 5px;
            box-shadow: 0 4px 15px rgba(111, 93, 215, 0.2);
        }
        
        .caption {
            margin-top: 20px;
            font-size: 1.2rem;
            color: #333;
            text-align: center;
        }
        
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            cursor: pointer;
            background: rgba(249, 98, 98, 0.3);
            border: none;
            border-radius: 0 3px 3px 0;
            z-index: 1001;
        }
        
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                height: 70vh;
                margin: 15vh auto;
            }
            
            .slide img {
                max-height: 50vh;
            }
            
            .caption {
                font-size: 1rem;
            }
        }
    `;
    document.head.appendChild(galleryStyle);
});